<template>
    <!--
        padding: 1px;会阻止下面的margin撑爆div！！！！！！！！！！！！
        -->
    <div style="width: 100%;height: 100%;box-sizing: border-box;padding: 1px;">
        <div style="border-bottom: red 1px solid;margin:3px 0;">测试嵌套弹窗</div>
        <el-button size="mini" round @click="showM1" type="primary">弹出M1</el-button>
        <div style="border-bottom: red 1px solid;margin:3px 0;">
            测试平级弹窗(<span style="color:red;">失败，不能做到div那样自由</span> )
        </div>
        <el-button size="mini" round @click="showM3" type="primary">弹出M3</el-button>
        <el-button size="mini" round @click="showM4" type="primary">弹出M4</el-button>
        <M1 ref="m1"></M1>
        <M3 ref="M3"></M3>
        <M4 ref="M4"></M4>
    </div>
</template>
<script>
    import M1 from "./M1.vue";
    import M3 from "./M3.vue";
    import M4 from "./M4.vue";
    export default {
        components: {
            M1,
            M3,
            M4,
        },
        methods:{
            showM1(){
                this.$refs.m1.show();
            },
            showM4() {
                this.$refs.M4.show();
            },
            showM3() {
                this.$refs.M3.show();
            },
        }
    }
</script>
